import { useState,useEffect } from "react"
import  {Message}  from 'element-react';

import { useNavigate } from "react-router-dom";
import axios from 'axios'
import './nav.scss'



export default function Nav(){
    const navigate = useNavigate(); 

    const [MainList, setMainList] = useState([]);
    const [isactive, setisactive] = useState(0);
    const [flag, setflag] = useState(false);
    const [children, setchildren] = useState([]);
    const [shopList, setshopList] = useState([]);

    useEffect(() => {
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then((res)=> {
            setMainList(res.data.result)
        })
        if(JSON.parse(localStorage.getItem('token'))!=null){
            axios({
                url:'https://apipc-xiaotuxian-front.itheima.net/member/cart',
                post:'get',
                headers: {
                    Authorization : `Bearer ${JSON.parse(localStorage.getItem('token')).token}`
                },
            }).then(res=>{
                if(res.data.result){
                    setshopList(res.data.result)
                }
            })
        }
    }, []);

    function shouye(){
        navigate('/homeview')
    }
    function enter(){}
    function over(){}
    function shopcar(){
        if(JSON.parse(localStorage.getItem('token'))!=null){
            navigate('/shopcar')
        }else{
            Message({
                message: '登录才能看购物车',
                type: 'warning'
              });
            navigate('login')
        }
    }
    function navTab(item,index){
        setisactive(index)
        navigate('/category',{ state: {id:item.id} })

    }
    function del(params) {
        
    }
    function shopCarnum(){
        var num = 0
        shopList.forEach(i => {
            if(i.isEffective==true){
                num+=i.count
            }
        });
        return num
    }
    function shopCarPrice(){
        var price = 0
        shopList.forEach(i => {
            if(i.isEffective==true){
                price+=i.count*i.price
            }
        });
        return price.toFixed(2)
    }
    return(
        <div id="nav">
                <div className="nav">
                    <div className="logo" ></div>
                    <ul>
                        <li>
                            <span onClick={()=>{shouye()}}>首页</span>
                        </li>
                        {
                            MainList&&MainList.map((item,index)=>{
                                return(
                                    <li onMouseOver={()=>{enter(index)}} key={index}>
                                        <span className className={index===isactive?'actived':''} onClick={()=>{navTab(item,index)}} >{item.name}</span>
                                    </li>
                                )
                            })
                        }
                        {
                            flag&&(
                                <ul className="mouse" >
                                    {
                                        children&&children.map((item,index)=>{
                                            return(
                                                <li key={index}  onMouseOut={this.leave.bind(this)}>
                                                    <img src={item.picture} alt="" />
                                                    <p>{item.name}</p>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                            )
                        }
                    </ul>
                    <div className="search">
                        <i>
                            <svg t="1666090027527" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3696" width="200" height="200"><path d="M938.64603 886.273219l-173.071777-173.074847c53.665247-63.987337 86.075401-146.400325 86.075401-236.446154 0-203.406666-164.895561-368.298134-368.301204-368.298134-203.409736 0-368.302227 164.892491-368.302227 368.298134 0 203.409736 164.892491 368.302227 368.302227 368.302227 89.246627 0 171.055864-31.767518 234.798631-84.579327l173.148525 173.148525c1.576915 1.576915 8.15575-2.443655 14.6957-8.979512l23.675212-23.675212C936.205445 894.428969 940.222945 887.850134 938.64603 886.273219zM483.347426 778.093381c-166.425404 0-301.338093-134.912689-301.338093-301.338093s134.912689-301.338093 301.338093-301.338093S784.685519 310.329884 784.685519 476.755288 649.773853 778.093381 483.347426 778.093381z" p-id="3697"></path></svg>
                        </i>
                        <input type="text" placeholder='搜一搜' />
                    </div>
                    <div className="cart" onMouseOver={()=>{over()}} onClick={()=>{shopcar()}}>
                        <div className="num">{shopCarnum()}</div>
                        <div className="shopcar">
                            <div className="list">
                                <ul>
                                    {
                                        shopList&&shopList.map((A,index)=>{
                                            return(
                                                <li key={index}>
                                                    <img src={A.picture} alt="" />
                                                    <div className="center">
                                                        <p>{A.name}</p>
                                                        <p>{A.attrsText}</p>
                                                    </div>
                                                    <div className="rigth">
                                                        <p>￥{A.nowPrice}</p>
                                                        <p>X{A.count}</p>
                                                    </div>
                                                    <div className="cuo" onClick={()=>{del()}}>X</div>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                                <div className="button">
                                    <div className="left">
                                        <p>共{shopCarnum()}商品</p>
                                        <p>￥{shopCarPrice()}</p>
                                    </div>
                                    <button>去购物车结算</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* <div className="navss" v-else>
                    <div className="navs" >
                        <div className="logo" ref="log"></div>
                        <ul>
                            <li>
                                <a className onClick="shouye()">首页</a>
                            </li>
                            <li v-for="(A,index) in MainList" @mouseout='leave(index)' @mouseover='enter(index)' :key="A.id">
                                <a className exact :className='{actived:index==isactive}'  onClick="navTab(index,A)">{{A.name}}</a>
                            </li>
                            <ul className="mouse" v-show="ismouse" >
                                <li v-for="(item,index) in array[0]">
                                    <img :src="item.picture">
                                    <p>{{item.name}}</p>
                                </li>
                            </ul>
                        </ul>
                        <div className="right">
                            <a className>品牌</a>
                            <a className>专题</a>
                        </div>
                    </div>
                </div> */}
            </div>
    )
}